<template>
	<u-navbar title="闲置物品" :autoBack="true" titleStyle="color:#d1f5f8;margin-left:-65%;margin-top:-1%;font-size:30rpx;"
		leftIconSize="30rpx" leftIconColor="#d1f5f8" placeholder bgColor="#01a7f4" height="75rpx" />
	<u-tabs :list="tabs" itemStyle="padding-right:80rpx; padding-left:80rpx;height: 80rpx;" @change="changeTab"
		activeStyle="font-weight:700;font-size:32rpx" inactiveStyle="font-size:32rpx"></u-tabs>
	<view class="content">
		<!-- 提示该列表为空内容 -->
		<u-empty mode="list" v-show="unusedContent.length == 0" iconColor="#01a7f4" textColor="#01a7f4" />
		<UnusedItem v-for="p in unusedContent" :key="p.id" :item="p" :type="type" @deletedShow="deleteOutcome">
		</UnusedItem>
	</view>
	<image class="send" src="/static/images/send.png" @click="send"></image>
	<up-back-top :scroll-top="scrollTop" top="200rpx"></up-back-top>
	<!-- 删除后的提示 -->
	<u-modal :show="deletedShow" :content="unusedStore.deletedStatus.msg" @confirm=" closeDeletedShow"></u-modal>
</template>

<script setup>
	import UnusedItem
	from "@/component/UnusedItem.vue"
	import {
		reactive,
		ref,
		computed,
	} from "vue";
	import {
		useUnusedStore
	} from "@/stores/unusedStore.js"
	import {
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app";

	const unusedStore = useUnusedStore()

	function send() {
		uni.navigateTo({
			url: "/pages/sendUnused/sendUnused"
		})
	}
	const scrollTop = ref(0);
	const tabs = reactive([{
			name: "全部",
			status: -1
		},
		{
			name: "出闲置",
			status: 0
		},
		{
			name: "购闲置",
			status: 1
		}
	])

	async function changeTab(item) {
		type.value = item.status
		//重新发送请求，根据类型更新列表
		if (item.status == -1) {
			await getUnusedList({
				schoolId: user.schoolId
			})
		} else {
			await getUnusedList({
				status: item.status,
				schoolId: user.schoolId
			})
		}
	}
	async function getUnusedList(data) {
		await unusedStore.getUnusedList(data)
	}
	let user = reactive({});
	let unusedContent = computed(() => {
		return unusedStore.unusedList
	})
	onShow(async () => {
		user = reactive({
			...JSON.parse(uni.getStorageSync("user"))
		});

		await getUnusedList({
			schoolId: user.schoolId
		})
	})

	const type = ref(-1)
	const deletedShow = ref(false)

	function closeDeletedShow() {
		deletedShow.value = false;
	}

	function deleteOutcome(value) {
		console.log(value)
		deletedShow.value = value
	}
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})
</script>

<style lang="scss">
	body {
		background-image: url('/static/images/unused-background.webp');
		background-size: 100vw 100vh;
		width: 100vw;
		height: 100vh;
		background-attachment: fixed;

		.content {
			display: flex;
			width: 98%;
			margin: 0 auto;


			flex-direction: column;
		}

		.send {
			width: 300rpx;
			height: 100rpx;
			position: fixed;
			margin: auto;
			bottom: 80rpx;
			right: 0;
			left: 0;
		}
	}
</style>